<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>排行榜</title>
		<!--<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css"/>-->
		<link rel="stylesheet" href="css/swiper-3.3.1.min.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/adaptation.js"></script>
	</head>
	<body>
		<div id="wrap">
			<div class="main" id="rankPage">
				<div class="header">
					<div class="txt-rank"></div>
				</div>
				<div class="school-list">
					<div class="swiper-wrapper">
						<div class="swiper-slide cur" data-sid="0">总排行</div>
						<div class="swiper-slide" data-sid="1">工程学院</div>
						<div class="swiper-slide" data-sid="2">宁波大学</div>
						<div class="swiper-slide" data-sid="3">诺丁汉</div>
						<div class="swiper-slide" data-sid="4">万里学院</div>
						<div class="swiper-slide" data-sid="5">大红鹰学院</div>
					</div>
				</div>
				<div class="line"></div>
				
				<!--宿舍列表-->
				<ul class="rank-list ui-list">
					<li class="clearfix">
						<i class="ui-rank-1"></i>
						<a href="detail.html">
							<div class="dormcover">
								<img src="img/cover.png" alt="" />
								<!--男寝class为ui-boy2,女寝class为ui-girl2-->
								<span class="sex ui-boy2"></span>
							</div>
							
							<div class="desc">
								<span class="type">别墅</span>
								<p class="dormname">EDGCclearlove</p>
								<p>诺丁汉<span class="num">房间编号：01123</span></p>
							</div>
						</a>
						
						<div class="btn-group">
							<a href="javascript:void(0);" class="ally" data-id="123"><i></i>结盟</a>
							<a href="javascript:void(0);" class="praise" data-id="123"><i></i><span>255</span></a>
						</div>
					</li>
					
					<li class="clearfix allied">
						<i class="ui-rank-2"></i>
						<a href="detail.html">
							<div class="dormcover">
								<img src="img/cover-2.png" alt="" />
								<span class="sex ui-girl2"></span>
							</div>
							<div class="desc">
								<span class="type">别墅</span>
								<p class="dormname">EDGCclearlove</p>
								<p>诺丁汉<span class="num">房间编号：01123</span></p>
							</div>
						</a>
						
						<div class="btn-group">
							<a href="javascript:void(0);" class="ally" data-id="123">已结盟</a>
							<!--已赞添加class praised-->
							<a href="javascript:void(0);" class="praise praised" data-id="123"><i></i><span>1999</span></a>
						</div>
					</li>
					
					<li class="clearfix isSend">
						<i class="ui-rank-3"></i>
						<a href="detail.html">
							<div class="dormcover">
								<img src="img/cover-2.png" alt="" />
								<span class="sex ui-girl2"></span>
							</div>
							<div class="desc">
								<span class="type">别墅</span>
								<p class="dormname">EDGCclearlove</p>
								<p>诺丁汉<span class="num">房间编号：01123</span></p>
							</div>
						</a>
						
						<div class="btn-group">
							<a href="javascript:void(0);" class="ally" data-id="123">已发送</a>
							<!--已赞添加class praised-->
							<a href="javascript:void(0);" class="praise praised" data-id="123"><i></i><span>1999</span></a>
						</div>
					</li>
					
					<li class="clearfix allied">
						<i class="rank">4</i>
						<a href="detail.html">
							<div class="dormcover">
								<img src="img/cover-2.png" alt="" />
								<span class="sex ui-girl2"></span>
							</div>
							<div class="desc">
								<span class="type">别墅</span>
								<p class="dormname">EDGCclearlove</p>
								<p>诺丁汉<span class="num">房间编号：01123</span></p>
							</div>
						</a>
						
						<div class="btn-group">
							<a href="javascript:void(0);" class="ally" data-id="123">已结盟</a>
							<!--已赞添加class praised-->
							<a href="javascript:void(0);" class="praise praised" data-id="123"><i></i><span>1999</span></a>
						</div>
					</li>
					
					<li class="clearfix isSend">
						<i class="rank">5</i>
						<div class="dormcover">
							<img src="img/cover-2.png" alt="" />
							<span class="sex ui-girl2"></span>
						</div>
						
						<div class="desc">
							<span class="type">别墅</span>
							<p class="dormname">EDGCclearlove</p>
							<p>诺丁汉<span class="num">房间编号：01123</span></p>
						</div>
						
						<div class="btn-group">
							<a href="javascript:void(0);" class="ally" data-id="123">已发送</a>
							<!--已赞添加class praised-->
							<a href="javascript:void(0);" class="praise praised" data-id="123"><i></i><span>1999</span></a>
						</div>
					</li>
				</ul>
				
				<!--此乃底部-->
				<div id="footer">
					<a href="hall.html" class="cur">宿管大厅</a>
					<a href="intro.html">活动说明</a>
					<a href="mydorm.html">我的寝室</a>
				</div>
			</div>
		</div>
		
		<!--弹窗-->
		<div style="display: none">
			<div id="no-satisfy-box">
				<a href="javascript:void(0);" class="layer-close ui-layer-close"></a>
				<div class="title txt-no"></div>
				<p>请前往“我的寝室”邀请好友</p>
				<p>或完善个人信息。</p>
				<div class="btn-group">
					<a href="mydorm.html" class="ui-go"></a>
				</div>
			</div>
		</div>
		<!--列表模板-->
		<!--
			参数ally： 0可以结盟,1已发送,2已结盟 int类型
		-->
		<script type="text/html" id="listTpl">
			<%each list as value i%>
			<li class="clearfix <%if value.ally==1%>isSend<%/if%><%if value.ally==2%>allied<%/if%>"">
				<%if value.rank<4%>
				<i class="ui-rank-<%value.rank%>"></i>
				<%else%>
				<i class="rank"><%value.rank%></i>
				<%/if%>
				<a href="detail.html">
					<div class="dormcover">
						<img src="<%value.cover%>" alt="" />
						<span class="sex <%if value.sex==0%>ui-boy2<%else%>ui-girl2<%/if%>"></span>
					</div>
					<div class="desc">
						<span class="type"><%value.dormtype%></span>
						<p class="dormname"><%value.dormname%></p>
						<p>诺丁汉<span class="num">房间编号：<%value.num%></span></p>
					</div>
				</a>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ally" data-id="<%value.id%>">
						<%if value.ally==1%>已发送<%/if%>
						<%if value.ally==2%>已结盟<%/if%>
						<%if value.ally==0%><i></i>结盟<%/if%>
					</a>
					<!--已赞添加class praised-->
					<a href="javascript:void(0);" class="praise <%if value.praised==true%>praised<%/if%>" data-id="<%value.id%>"><i></i><span><%value.thumbups%></span></a>
				</div>
			</li>
			<%/each%>
		</script>
		
		<script src="js/zepto.min.js"></script>
		<script src="js/layer/layer.js"></script>
		<!--<script src="js/idangerous.swiper.min.js"></script>-->
		<script src="js/swiper-3.3.1.min.js"></script>
		<script src="js/template.js"></script>
		<script src="js/common.js"></script>
		<script>
			$(function(){
				template.config('openTag','<%');
				template.config('closeTag','%>');
				
				var mySwiper = new Swiper('.school-list',{
					freeMode: true,
					slidesPerView: "auto"
				});
				
				//切换排行榜
				$(".swiper-slide").click(function(){
					var isCur = $(this).hasClass("cur");
					if(isCur){
						return;
					}
					$(this).addClass("cur");
					$(this).siblings().removeClass("cur");
					var sid = $(this).data('sid');
					$.ajax({
						type: "get",
						data: {sid:sid},
						dataType: "json",
						url: "data/rank.json",
						success: function(data){
							var html = template('listTpl',data);
							$(".rank-list").html(html);
						}
					});
				});
				
				//点赞
				$(document).on('click','.praise',function(){
					var isPraised = $(this).hasClass("praised");
					if(isPraised){
						remind("你已经点过赞了");
						return;
					}
					var id = $(this).data('id');
					var instance = this;
					$.ajax({
						type: "get",
						data: {id:id},
						dataType: "json",
						url: "data/praise.json",
						success: function(data){
							if(data.status){
								$(instance).addClass("praised");
								$(instance).find("span").text(Number($(instance).find("span").text())+1);
							}
						}
					});
				});
				
				//结盟
				$(document).on('click','.ally',function(){
					var isAllied = $(this).parents("li").hasClass("allied");
					if(isAllied){
						return;
					}
					var isSend = $(this).parents("li").hasClass("isSend");
					if(isSend){
						return;
					}
					var id = $(this).data("id");
					var instance = this;
					$.ajax({
						type: "get",
						data: {id:id},
						dataType: "json",
						url: "data/jm.json",
						success: function(data){
							if(data.status==true){
								$(instance).html("已发送");
								$(instance).parents("li").addClass("isSend");
							}else{
								//条件不符
								layer.open({
									content: $("#no-satisfy-box")[0].outerHTML,
									shadeClose: false,
									className: "layer-border"
								});
							}
						}
					});
				});
			});
		</script>
	</body>
</html>
